<template>
    <div class="moneyLog">
        <el-card header="流水明细">
            <el-table :data="tableData" :border="tableData.length" :show-header="tableData.length">
                <template #empty>
                    <empty/>
                </template>
                <el-table-column prop="createdAt" label="时间">
                    <template #default="scope">
                        <div>{{ timeFormat(scope.row.createdAt) }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="money" label="金额"/>
                <el-table-column prop="statusDesc" label="状态"/>
            </el-table>

            <El-pagination
                :paginationParams="paginationParams"
                @pageChange="pageChange"
                @pageSizeChange="pageSizeChange"
            />
        </el-card>
    </div>
</template>

<script setup lang="ts">
import {onMounted, ref, reactive, computed} from 'vue'
import {timeFormat} from "@/utils/formatTime";
import type {paginationParamsType} from "@/components/ElementPlus_components/el-pagination/type";
import {getUserMoneyLogApi} from '@/api/user'

const tableData = ref([]);
const paginationParams = reactive(<paginationParamsType>{
    page: 1,
    pageSize: 10,
    total: 100,
})
const pageChange = (val: number) => {
    // message("info", "当前页变化")
    paginationParams.page = val
    getTableData();
}
const pageSizeChange = (val: number) => {
    // message("info", "每页条数变化")
    paginationParams.pageSize = val
    getTableData();
}

const getTableData = async () => {
    const res: any = await getUserMoneyLogApi({
        current: paginationParams.page,
        size: paginationParams.pageSize
    });
    if (res.success) {
        tableData.value = res.data.records || [];
        paginationParams.total = res.data.total;
    }
}
getTableData();
</script>

<style lang="scss" scoped>

</style>
